<h1>Dashboard (ng2)</h1>

<table> 
	<tr>
		<td>
			<button (click)="getServerTime()">Get server time</button>
			<p>
				Server time:
				<i class="noteng">{{currentServerTime}}</i>
			<p>
		</td>
	</tr>
	
	<tr *ngFor="#categoryInfo of allCategoriesInfo; #i = index">
		<td>
			<table class="categories">
				<tr>
					<td class="leading-column">
						<img src="Images/{{image[i]}}" (click)="toggleImage(i)" />
					</td>
					 
					<td class="column-name">{{categoryInfo.Name}}</td>
					<td class="column-description">{{categoryInfo.Description}}</td>
					<td class="column-status">
						<div class="column-status rectangle {{categoryIndicatorAsString[i]}}"></div>
					</td>
					<td class="column-statusAsString">{{categoryIndicatorAsString[i]}}</td>				
				</tr>
			</table>
			<table class="devices" [hidden]="!imageIndex[i]">
				<tr *ngFor="#deviceInfo of allDevicesInfo; #j = index" [hidden]="deviceInfo.CategoryId != categoryInfo.Id">
					
					<td class="leading-column" style="border-width: 0px"></td>
					<td class="column-name">{{deviceInfo.Name}}</td>
					<td class="column-description">{{deviceInfo.Description}}</td>
					<td class="column-status">
						<div class="column-status circle {{allDevices[j].StatusAsString}}"></div>
					</td>
					<td class="column-statusAsString">{{allDevices[j].StatusAsString}}</td>
					
				</tr>
			</table>
		</td>
	</tr>
</table>
